<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>提交产品订单</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/reset.css">
<!--    <link rel="stylesheet" type="text/css" href="__CSS__/wechat/adds.css">-->
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
<!--    <script type="text/javascript" src="__JS__/swayPlugIn.js"></script>-->
    <script src="__JS__/dialog/layer.js"></script>
    <script src="__JS__/vue.js"></script>
    <script src="__JS__/iconfont.js"></script>
    <link rel="stylesheet" href="__CSS__/wechat/msglist.css" />
    <style type="text/css">
    	.gd{
    		position: fixed;
    		width: 5%;
    		height: 60px;
    		z-index: 100000;
    		font-size: 30px;
    		left: 43%;
    		top: 40%;
    		text-align: center;
    	}
    </style>
</head>
<body>
	
	<div id="inp" style="max-height: 0.12rem;font-size: 0.12rem;"></div>
	<div id="msglist">
		<div class="gd" v-if="isLoad">加载中>_<</div>
		<ul>
	    	<li v-for="(list,index) in lists" @click="changeRec(index,list.id)">
	    		<svg :class="{'readed':list.receivetime==0,'readed2':list.receivetime!=0}" aria-hidden="true">
				  <use xlink:href="#icon-queding" v-if="list.receivetime==0"></use>
				  <use xlink:href="#icon-ryes" v-if="list.receivetime!=0"></use>
				</svg>
	    		<div class="list_con">
	    			<a :href="a_link" @click="a_link2(list.link,index,$event)">
		    			<div class="list_type">{{list.type}}</div>
		    			<div :class="{'list_msg':isopen[index],'list_msg2':!isopen[index]}">{{list.content}}</div>	   	
	    			</a>	    			 			
	    		</div>
	    		<div class="time">{{list.sendtime | timetrans(3)}}</div>
	    	</li>
	   </ul>
	   <ul>
	    	<li v-for="(list,index) in lists2" @click="changeRec(index,list.id)">
	    		<svg :class="{'readed':list.receivetime==0,'readed2':list.receivetime!=0}" aria-hidden="true">
				  <use xlink:href="#icon-queding" v-if="list.receivetime==0"></use>
				  <use xlink:href="#icon-ryes" v-if="list.receivetime!=0"></use>
				</svg>
	    		<div class="list_con">
	    			<a :href="a_link" @click="a_link2(list.link,index,$event)">
		    			<div class="list_type">{{list.type}}</div>
		    			<div :class="{'list_msg':isopen[index],'list_msg2':!isopen[index]}">{{list.content}}</div>	   	
	    			</a>	    			 			
	    		</div>
	    		<div class="time">{{list.sendtime | timetrans(3)}}</div>
	    	</li>
	   </ul>	  
	</div>
    
</body>
<script type="text/javascript">			
	Vue.filter("timetrans",function(date,type){
        var date = new Date(date*1000);//如果date为10位不需要乘1000
        var Y = date.getFullYear();
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
        var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
        var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());        
        if(type==1){
          return Y+"/"+M+"/"+D+" "+h+":"+m+":"+s;
        }else if(type==2){
          return Y+"/"+M+"/"+D;
        } else if(type==3){
          return M+"/"+D+" "+h+":"+m;
        }     
      });
    var vm=new Vue({
    	el:"#msglist",
    	data:{
    		lists:[],
    		lists2:[],
    		a_link:"#",
    		isopen:[],
    		num:2,
    		isLoad:false
    	},
    	methods:{
    		changeRec:function(index,id){   			
    			if(this.lists[index].receivetime==0){
	    			$.ajax({
	    				url:"{{:url('wechat/Cons/mread')}}",
	    				type:"post",
	    				data:{
	    					id:id,
	    					
	    				},success:function(data){
	    					console.log(data)
	    				}
	    			})	
    			}
    			this.lists[index].receivetime++;
    		},
    		a_link2:function(links,index,e){
    			if(links==""){
    				e.preventDefault();
    				this.isopen[index]=!this.isopen[index];
  				
    			}else{
    				this.a_link=links;
    			}
    		}
    	},
    	created:function(){
    		var _this=this;
    		$.ajax({
    			type:"post",
    			data:{page:1,pageSize:14},
    			url:"{{:url('wechat/Cons/msglist')}}",
    			success:function(data){
    				var data=JSON.parse(data);
    				if(data.status==1){
    					var data=data.data;
    					var data=data.data;
    					_this.lists=data;
    					for(var i=0;i<_this.lists.length;i++){
    						_this.isopen.push(true);
			    			switch(_this.lists[i].type){
			    				case 0:
			    				_this.lists[i].type='系统消息';
			    				break;
			    				case 1:
			    				_this.lists[i].type='产品订单消息';
			    				break;
			    				case 2:
			    				_this.lists[i].type='工程订单消息';
			    				break;
			    				case 3:
			    				_this.lists[i].type='催单消息';
			    				break;
			    				case 4:
			    				_this.lists[i].type='财务消息';
			    				break;
			    				case 5:
			    				_this.lists[i].type='物流消息';
			    				break;
			    				case 6:
			    				_this.lists[i].type='普通消息(如客户之间交流)';
			    				break;
			    				case 7:
			    				_this.lists[i].type='抢单消息(通知承包商有新的订单)';
			    				break;
			    				case 8:
			    				_this.lists[i].type='抢单接单消息';
			    				break;
			    			} 
		    			}
    				}else{
    					layer.msg(data.message);
    				}
    			}
    		});
    		window.addEventListener('scroll', function() {
			  var scrollTop = document.body.scrollTop;
			  if(scrollTop + window.innerHeight >= document.body.clientHeight) {
			    // 触发加载数据  
			    _this.isLoad=true;
			    	loadMore();
			  	}
			});
			function loadMore(){
			 	$.ajax({
    			type:"post",
    			data:{page:_this.num,pageSize:3},
    			url:"{{:url('wechat/Cons/msglist')}}",
    			success:function(data){
    				_this.num++;
    				var data=JSON.parse(data);
    				if(data.status==1){
    					var data=data.data;
    					var data=data.data;
    					console.log(data);
    					for(var i=0;i<data.length;i++){
    						_this.lists2.push(data[i]);
    					}
    					for(var i=0;i<_this.lists2.length;i++){
    						_this.isopen.push(true);
			    			switch(_this.lists2[i].type){
			    				case 0:
			    				_this.lists2[i].type='系统消息';
			    				break;
			    				case 1:
			    				_this.lists2[i].type='产品订单消息';
			    				break;
			    				case 2:
			    				_this.lists2[i].type='工程订单消息';
			    				break;
			    				case 3:
			    				_this.lists2[i].type='催单消息';
			    				break;
			    				case 4:
			    				_this.lists2[i].type='财务消息';
			    				break;
			    				case 5:
			    				_this.lists2[i].type='物流消息';
			    				break;
			    				case 6:
			    				_this.lists2[i].type='普通消息(如客户之间交流)';
			    				break;
			    				case 7:
			    				_this.lists2[i].type='抢单消息(通知承包商有新的订单)';
			    				break;
			    				case 8:
			    				_this.lists2[i].type='抢单接单消息';
			    				break;
			    			} 
		    			}
    				}else{
    					layer.msg(data.message);
    				}
    				_this.isLoad=false;    				
    			}
			})
    	}
    }	
   })

    
</script>
</html>